<template>
    <div class="bannersearch">
        <div class="onebasicinformationclose" @click="goclose"><i class="el-icon-circle-close"></i></div>
        <div class="bannersearchbg">
            <!-- <img class="messageboxactivebg" src="@/assets/images/home/首页-弹窗.png" alt="" /> -->
            <img class="bannersearchbgimg" src="https://anxd2.oss-cn-shanghai.aliyuncs.com/redPacket/img/筛查领红包.jpg" alt="">
        </div>
        <div class="bannersearchbtn">
            <img v-if="isDone == -1" class="bannersearchbtnimg" src="@/assets/images/home/筛查领红包详情页-我要筛查.png" alt="">
            <div class="clickbtn">

                <div v-if="isDone == -1" style="width: 100%;  height: 100%;  position: absolute;  display: flex; top: 0;">
                    <div @click="godetail" class="clickbtn-btn"></div>
                    <div @click="share" class="clickbtn-btn"></div>
                </div>
                <div v-else @click="share" class="shearimg">
                    <img style="width: 375px; height: 57px;" src="../../../assets/images/home/继续分享.png" alt="">
                </div>
            </div>
        </div>
        <div @click="falseclick" v-if="isshow" class="bgisshow">
            <img style="width: 100%; height: 193px; position: fixed; top: 10px; " src="@/assets/images/分享提示页.png" alt="">
        </div>
    </div>
</template>
<script>
import { addburyingpoint, getShareLink, getShareData, getredpacket, addpacketstep, shareNum, getUserData } from '@/api/http.js'
import wx from "weixin-js-sdk";
export default {
    data() {
        return {
            isshow: false,
            appId: 'wx89289c3a3da01e68', //微信公众号唯一标识，在微信公众号后台获取
            title: '每年一次脑健康筛查！',  //分享内容的标题
            desc: '做脑健康筛查也能领红包了，快来看看吧~', // 分享内容的简短描述
            link: 'https://www.ainaoxingdong.com/brainshare/index.html',
            imgUrl: 'https://www.ainaoxingdong.com/api/an-media/images/share.png', //必须是绝对路径,
            t: '',
            n: '',
            s: '',
            timer: '',
            anFlag: '',
            Num: '',
            isDone: '',
        }
    },
    mounted() {
        getredpacket().then(res => {
            console.log(res, '调用了')
            
            if (res.code !== 500) {

                this.anFlag = res.data.anFlag
                console.log(res, '调用了')
                if (res.data.anFlag == 1) {
                    this.anFlag = res.data.anFlag
                    console.log('完成筛查')
                } else {
                    this.anFlag = res.data.anFlag
                    console.log('没有完成筛查')
                }
            }

        })
        shareNum().then(res => {
            this.Num = res.data
            console.log(res)
        })
        // 初始化调接口
        this.getKeyParams();
    },
    created() {
        getUserData().then(res => {
            console.log(res.rows[0].isDone, '=====================')
            if (res.rows[0].isDone == 0) {
                this.isDone = res.rows[0].isDone
            } else {
                this.isDone = -1
            }
        })
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // alert('是否是Android：'+isAndroid);
        // alert('是否是iOS：'+isiOS);
        // console.log('+++reeeer+++++', location.href.indexOf("#reloaded"));
        if (isAndroid) {
            if (location.href.indexOf("#reloaded") == -1) {
                location.href = location.href + "#reloaded";
                location.reload();
            }
        } else {
            console.log('苹果手机');
        }


        console.log(location.href.split('#')[0]);
        console.log(location.href.split('?')[0]);
    },
    methods: {
        godetail() {
            console.log(this.anFlag)
            
            if (this.anFlag == 0) {
                console.log(this.anFlag)
                let obj = { buriedPointName: '规则介绍我要筛查', section: '3', module: '1', function: '2', redirectPage: '信息填写页', orgNo: '' }
                addburyingpoint(obj).then(res => {

                    console.log(res)
                })
                this.$router.push('/message')

            } else {
                // this.isreport = true
                // let obj = { buriedPointName: '首页点击完成筛查弹窗提示', section: '3', module: '2', function: '2', redirectPage: '完成筛查弹窗提示', orgNo: '' }
                // addburyingpoint(obj).then(res => {

                //     console.log(res)
                // })
                // // this.$router.push('/completescreening')
            }
        },
        share() {
            let obj = { buriedPointName: '规则介绍分享', section: '3', module: '1', function: '3', redirectPage: '拉起分享浮窗', orgNo: '' }
            addburyingpoint(obj).then(res => {
                console.log(res)
            })
            this.isshow = true

            setTimeout(() => {
                console.log(this.Num, this.Num >= 5)
                if (this.Num >= 5) {
                    this.$router.push({
                        path: "/completeactivity"
                    })
                } else {
                    this.$router.push('/successfullyshared')
                }

            }, 6000);

        },
        falseclick() {
            this.isshow = false
        },
        goclose() {
            let url = encodeURIComponent('activity')
            addpacketstep(url).then(res => {
                console.log(res)
                this.$router.push('/activity')
            })
        },
        getKeyParams() {
            getShareData({ url: sessionStorage.getItem('scanUrl') }).then((result) => {
                console.log('result', result);

                this.t = result.data.timestamp
                this.n = result.data.nonceStr
                this.s = result.data.signature
                //拿到三个参数之后，调用wxConfig方法进行权限验证
                this.shareMes()
                console.log('@@@@@', this.t, this.n, this.s);
            });
        },
        shareMes() {
            wx.config({
                // 配置参数
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: this.appId, // 必填，公众号的唯一标识
                timestamp: this.t, // 必填，生成签名的时间戳
                nonceStr: this.n, // 必填，生成签名的随机串
                signature: this.s, // 必填，签名
                jsApiList: [
                    'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'
                ]
            });
            wx.checkJsApi({
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function (res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    console.log(res, 'checkJsApi')
                }
            });
            this.wxShare();
            console.log('hihihi');
        },
        wxShare() {
            const that = this
            wx.ready(() => {
                wx.updateAppMessageShareData({
                    title: this.title, // 分享标题
                    desc: this.desc,// 分享描述
                    link: this.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: this.imgUrl, // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        var token = localStorage.getItem('token')
                        if (token) {
                            // let url = encodeURIComponent('successfullyshared')
                            // addpacketstep(url).then((res) => {
                            // console.log('res', res);
                            // that.$router.replace('/successfullyshared')
                            // window.location.href = 'https://www.ainaoxingdong.com/braintest/index.html#/successfullyshared'
                            // })
                        }
                    }
                });
                wx.updateTimelineShareData({
                    title: this.title, // 分享标题
                    desc: this.desc, // 分享描述
                    link: this.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: this.imgUrl, // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        console.log('log', this, that);
                        var token = localStorage.getItem('token')
                        if (token) {
                            // let url = encodeURIComponent('successfullyshared')
                            // addpacketstep(url).then((res) => {
                            // console.log('res', res);
                            // that.$router.replace('/successfullyshared')
                            // window.location.href = 'https://www.ainaoxingdong.com/braintest/index.html#/successfullyshared'
                            // })
                        }

                    }
                });
            });
            wx.error(function (res) {
                console.log('生成微信签名失败了');
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            })
        }
    }
}
</script>
<style>
.bannersearch {
    width: 100%;
    overflow: hidden;

    /* overflow-y: scroll; */
    position: absolute;
}

.onebasicinformationclose {
    position: fixed;
    top: 10px;
    right: 10px;
    font-size: 36px;
    width: 45px;
    height: 45px;
    color: #fff;
    text-align: center;
    line-height: 45px;
}

.bgisshow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 77;
    background: #000000bf;
    top: 0;
    left: 0;
}

.bannersearchbg {
    width: 100%;
    height: 1549px;
}

.bannersearchbgimg {
    width: 100%;
    height: 100%;
}

.bannersearchbtn {
    width: 375px;
    height: 59px;
    position: fixed;
    bottom: 0;
    z-index: 1;
}

.shearimg {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.bannersearchbtnimg {
    width: 100%;
    height: 100%;
}

.clickbtn {
    width: 100%;
    height: 59px;
    position: absolute;
    display: flex;
    top: 0;

}

.clickbtn-btn {
    flex: 1;
}
</style>